<template>
  <div 
    class="ant-upload-list ant-upload-list-picture"
    :class="file.status === 'error' ? 'ant-upload-list-item-error' : ''">
    <div class="ant-upload-list-item" :class="prefixCls + '-item'">
      <div class="ant-upload-list-item-thumbnai ">
        <ImagePreview :class="prefixCls + '-image-preview'" 
          :image-list="[{src: file.url, width: '48px', placeholder: false}]"
        />
      </div>
      <span class="ant-upload-list-item-name">{{ file.name }}</span>

      <span class="ant-upload-list-item-actions picture ">
        <a-button  
          @click="handleRemove" size="small" 
          type="text" title='移除文件' 
          class="ant-upload-list-item-action ant-btn-icon-only" :class="prefixCls + '-action'">
          <Icon icon="ant-design:delete-outlined"></Icon>
        </a-button>
      </span>
    </div>
  </div>
</template>
<script lang="ts" name="file-record" setup>
import {onUnmounted, unref, watchEffect} from 'vue'
import {useMessage} from '/@/hooks/web/useMessage';
import {ImagePreview} from '/@/components/Preview/index';
import {propTypes} from '/@/utils/propTypes';
import {useDesign} from '/@/hooks/web/useDesign';

const { createMessage } = useMessage();
const emit = defineEmits(['remove', 'download']);
const { prefixCls } = useDesign('select-material');

const props = defineProps({
  width: propTypes.string.def('300px'),
  file: propTypes.object.def({}),
});


onUnmounted(() => {
  console.log('onUnmounted-props', unref(props));
})

watchEffect(() => {
 
});

const handleDownload = () => {
  emit('download')
}

const handleRemove = () => {
  emit('remove')
}

</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-select-material';
.@{prefix-cls}-image-preview .ant-image{
  display: block !important;
  img { 
    width: 48px;
    height: 48px;
    overflow: hidden;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
    line-height: 66px;
    text-align: center;
    flex: none;
  }
}

.@{prefix-cls}-item {
  display: flex;
  align-items: center;
}


.@{prefix-cls}-action:hover {
  color: #ff4d4f;;
  -webkit-transition: all .5s;
  transition: all .5s;
}


.@{prefix-cls}-image-preview .ant-image-mask-info {
  // 将div下的所有元素隐藏文字大小为0
  visibility: hidden !important;
  font-size: 0 !important; 
}
.@{prefix-cls}-image-preview .ant-image-mask-info span {
  // 再单独给span标签添加样式 让其显示并且给出文字大小
  visibility: visible !important;
  font-size: 14px !important;
}
</style>
